<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>登录界面</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/loginofall.css">
    <script src="${pageContext.request.contextPath}/static/jquery/jquery-3.1.1.js"></script>
    <script src="${pageContext.request.contextPath}/static/jquery/jquery.validate.js"></script>
</head>
<body>
    <div class="pageall">
         <img class="backph" style="width:100%;height:100%;" src="${pageContext.request.contextPath}/static/images/shan.jpg"/>
         <div class="backphall">
             <div class="loginkuang">
                 <div class="loginerror">密码错误或者当前账号已在其它设备登录！</div>
             <div class="logo">
                 <img src="${pageContext.request.contextPath}/static/images/logo.png" style="width:100%;height:100%" class="logoph"/>
             </div>
             <div class="titleword">门禁权限系统</div>
             <form action="login.do" method="post" id="loginform">
                 <div class="accountlogo">
                     <img src="${pageContext.request.contextPath}/static/images/account.png" style="width:80%;height:80%;margin-top:2px;"/>
                 </div>
                  <input type="text" class="accountbox" name="admin_username" id="account" placeholder="请输入账号"/>
                 <div class="passwordlogo">
                     <img src="${pageContext.request.contextPath}/static/images/pwd.png" style="width:80%;height:80%;margin-top:2px;"/>
                 </div>
                  <input type="password" class="passwordbox" name="admin_password" id="password" placeholder="请输入密码"/>
                  <input type="submit" value="登录 / login" class="login"/>
             </form>
             </div>
         </div>
    </div>
</body>
<script type="text/javascript">

    var w=$(window).width();
    var h=$(window).height();
    $(".pageall").innerWidth(w+"px");
    $(".pageall").innerHeight(h+"px");

    $("#loginform").validate({
        rules: {
            admin_username: {
                required: true,
                remote:"${pageContext.request.contextPath}/findadminname.do"
            },
            admin_password: {
                required: true
            }
        },
        messages: {
            admin_username: {
                required: "*账号为必填项，请完善该信息！",
                remote:"*该账号不存在，请重新完善信息！"
            },
            admin_password: {
                required: "*密码为必填项，请完善该信息！"
            }
        },
        submitHandler: function(form) {
            var param = $("#loginform").serialize();
            $.ajax({
                type:'POST',
                url:"${pageContext.request.contextPath}/login.do",
                data:param,
                dataType:"json",
                success:function(data){
                    if(data==true){
                        window.location.href="${pageContext.request.contextPath}/home";
                    }else{
                        $(".loginerror").fadeIn(500);
                        $(".loginerror").fadeOut(5000);
                    }
                }
            });
        }
    });
    $(".login").mouseover(function(){
        $(".login").css("background-color","rgba(50,180,50,0.9)");
    });
    $(".login").mouseout(function(){
        $(".login").css("background-color","rgba(50,180,50,0.6)");
    });
    $(".accountbox").focus(function(){
        $(".accountbox").css("border-bottom","2px solid #CCC");
        $(".loginkuang").css("background-color","rgba(160,251,254,0.1)");
    });
    $(".accountbox").focusout(function(){
        $(".accountbox").css("border-bottom","1px solid #777");
        $(".loginkuang").css("background-color","rgba(255,255,255,0.1)");
    });
    $(".passwordbox").focus(function(){
        $(".passwordbox").css("border-bottom","2px solid #CCC");
        $(".loginkuang").css("background-color","rgba(160,251,254,0.1)");
    });
    $(".passwordbox").focusout(function(){
        $(".passwordbox").css("border-bottom","1px solid #777");
        $(".loginkuang").css("background-color","rgba(255,255,255,0.1)");
    });
    $(".login").focus(function(){
        $(".loginkuang").css("background-color","rgba(255,255,255,0.1)");
    });
    $(".login").focusout(function(){
        $(".loginkuang").css("background-color","rgba(255,255,255,0.1)");
    });
</script>
</html>